<template>
  <div class="wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>结算管理</el-breadcrumb-item>
      <el-breadcrumb-item>账单查询</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item>
          <el-dropdown @command="setState">
            <span class="el-dropdown-link">
              {{stateStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{value: '', title: '全部状态' }">全部状态</el-dropdown-item>
              <el-dropdown-item :command="{value: '3', title: '取消订单' }">取消订单</el-dropdown-item>
              <el-dropdown-item :command="{value: '4', title: '退房' }">退房</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setType">
            <span class="el-dropdown-link">
              {{typeStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- 1：会员，2：员工，3：自主 -->
              <el-dropdown-item :command="{value: '0', title: '全部类型' }">全部类型</el-dropdown-item>
              <el-dropdown-item :command="{value: '1', title: '会员' }">会员</el-dropdown-item>
              <el-dropdown-item :command="{value: '2', title: '员工' }">员工</el-dropdown-item>
              <el-dropdown-item :command="{value: '3', title: '自主' }">自主</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setTime">
            <span class="el-dropdown-link">
              {{timeStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item :command="{value: '0', title: '时间类型' }">时间类型</el-dropdown-item>
              <el-dropdown-item :command="{value: '1', title: '入住时间' }">入住时间</el-dropdown-item>
              <el-dropdown-item :command="{value: '2', title: '离店时间' }">离店时间</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="startEndTime"
            size="small"
            :disabled="time==0"
            :clearable="false"
            style="height:34px;width:230px"
            type="daterange"
            @change="_reset"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入订单号查询"
            v-model="orderNum"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入账单号查询"
            clearable
            v-model="bills"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click.native="_reset"
            size="small"
            style="width:60px">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary"
            v-has="'financebillexcel'"
            size="small"
            :disabled="!billSelect.length"
            @click.native="_exportToLog"
            style="width:60px">
            导出
          </el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-table :data="billSelect"
            :summary-method="getSummaries"
            show-summary
            max-height="550">
            <el-table-column label="订单号"
              fixed
              prop="orderNum"
              width="150">
            </el-table-column>
            <el-table-column label="账单号"
              prop="checkNum"
              width="150">
            </el-table-column>
            <el-table-column label="状态"
              width="100"
              prop="stateCN"></el-table-column>
            <el-table-column label="房型"
              width="100"
              prop="room"></el-table-column>
            <el-table-column label="入离时间"
              width="200"
              prop="time"></el-table-column>
            <el-table-column label="总消费"
              width="150"
              prop="sumConsume"></el-table-column>
            <el-table-column label="房费"
              width="150"
              prop="roomMoney"></el-table-column>
            <el-table-column label="消费"
              width="150"
              prop="consume"></el-table-column>
            <el-table-column label="分销奖励"
              width="150"
              prop="sellMoney"></el-table-column>
            <el-table-column label="分享类型"
              width="100"
              prop="type"></el-table-column>
            <el-table-column label="下单时间"
              width="200"
              prop="orderTime"></el-table-column>
            <el-table-column label="酒店名称"
              prop="hotelName"
              width="200">
            </el-table-column>
            <!-- <el-table-column label="税前应收"
              width="150"
              prop="preTax"></el-table-column>
            <el-table-column label="税后应收"
              width="150"
              prop="afterTax"></el-table-column> -->
            <el-table-column label="操作"
              fixed="right"
              width="100">
              <template slot-scope="scope">
                <el-button type="text"
                  @click="_detial(scope.row.checkId)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getBillCheckingList, exportBillExcel } from "@/public/js/bill";
import { exportToExcel } from "@/public/js/util";
export default {
  components: {},
  props: {},
  data() {
    return {
      timeStr: "日期类型",
      typeStr: "全部类型",
      stateStr: "全部状态",
      billSelect: [],
      billSelectSum: [],
      exportBillSelect: [],
      startEndTime: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      type: "",
      state: "",
      time: 0,
      orderNum: "",
      bills: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    //获取列表数据
    _getBillCheckingList() {
      getBillCheckingList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.type,
        time: this.time,
        state: this.state,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : "",
        orderNum: this.orderNum,
        bills: this.bills
      }).then(res => {
        this.billSelect = res.data.billSelect;
        this.billSelectSum = res.data.billSelectSum;
        this.total = res.data.total;
      });
    },
    getSummaries(param) {
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) sums[index] = "总合计";
        if (index === 8)
          sums[index] = "总营业额:￥" + this.billSelectSum.sumConsumeSum;
        if (index === 9)
          sums[index] = "总房价:￥" + this.billSelectSum.roomMoneySum;
        if (index === 10)
          sums[index] = "总消费:￥" + this.billSelectSum.consumeSum;
        if (index === 11)
          sums[index] = "分销奖励:￥" + this.billSelectSum.sellMoneySum;
        if (index === 12)
          sums[index] = "税前应收:￥" + this.billSelectSum.preTaxSum;
        if (index === 13)
          sums[index] = "税后应收:￥" + this.billSelectSum.afterTaxSum;
      });
      return sums;
    },
    // 导出列表数据
    _exportBillExcel(callback) {
      exportBillExcel({
        type: this.type,
        time: this.time,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : ""
      }).then(res => {
        this.exportBillSelect = res.data.billSelect;
        this.exportBillSelectSum = res.data.billSelectSum;
        this.exportBillSelect[this.exportBillSelect.length] = {
          orderNum: "总合计",
          sumConsume: "总营业额:￥" + this.exportBillSelectSum.sumConsumeSum,
          roomMoney: "总房费:￥" + this.exportBillSelectSum.roomMoneySum,
          consume: "总消费:￥" + this.exportBillSelectSum.consumeSum,
          sellMoney: "分销奖励:￥" + this.exportBillSelectSum.sellMoneySum,
          preTax: "税前应付:￥" + this.exportBillSelectSum.preTaxSum,
          afterTax: "税后应付:￥" + this.exportBillSelectSum.afterTaxSum
        };
        callback();
      });
    },
    //导出日志
    _exportToLog() {
      this._exportBillExcel(() => {
        const tHeader = [
          "订单号",
          "账单号",
          "酒店名称",
          "房型",
          "下单时间",
          "入离时间",
          "状态",
          "分享类型",
          "总消费",
          "房费",
          "消费",
          "分销奖励",
          "税前应收",
          "税后应收"
        ];
        const filterVal = [
          "orderNum",
          "checkNum",
          "hotelName",
          "room",
          "orderTime",
          "time",
          "stateCN",
          "type",
          "sumConsume",
          "roomMoney",
          "consume",
          "sellMoney",
          "preTax",
          "afterTax"
        ];
        exportToExcel(tHeader, filterVal, this.exportBillSelect, "账单表");
      });
    },
    _reset() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._getBillCheckingList();
    },
    _detial(id) {
      this.$router.push({ path: `/index/checkIn-detail?id=${id}` });
    },
    setTime(time) {
      this.timeStr = time.title;
      this.time = time.value;
      if (this.time == 0) {
        this.startEndTime = [];
      }
    },
    setType(type) {
      this.typeStr = type.title;
      this.type = type.value;
      this._reset();
    },
    setState(state) {
      this.stateStr = state.title;
      this.state = state.value;
      this._reset();
    },
    _saleList() {},
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getBillCheckingList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this._getBillCheckingList();
    }
  },
  created() {
    this._getBillCheckingList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>